<template>
  <view v-if="visible" class="overlay" @click="$emit('close')">
    <view class="sheet" @click.stop>
      <view class="header">
        <text class="title">制作与背包</text>
        <button class="close" @click="$emit('close')">✕</button>
      </view>
      <view class="content">
        <view class="section">
          <text class="section-title">资源</text>
          <view class="res-list">
            <view class="res-item" v-for="(v, k) in inventory" :key="k">
              <text class="res-name">{{ translate(k) }}</text>
              <text class="res-val">×{{ v }}</text>
            </view>
          </view>
        </view>
        <view class="section">
          <text class="section-title">配方</text>
          <view class="recipe-list">
            <button class="recipe-item" v-for="r in recipes" :key="r.id" @click="$emit('craft', r)">
              <view class="row">
                <text class="recipe-name">{{ r.name }}</text>
                <text class="recipe-type">{{ r.type }}</text>
              </view>
              <view class="row small">
                <text class="req">需要: {{ formatReq(r.requires) }}</text>
                <text class="eff">效果: {{ r.effectDesc }}</text>
              </view>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
    inventory: { type: Object, default: () => ({}) },
    recipes: { type: Array, default: () => [] }
  },
  methods: {
    translate(k) {
      const map = { 
        wood: '木材', 
        stone: '石头', 
        vine: '藤蔓', 
        water: '淡水',
        food: '食物',
        energy: '精力',
        hp: '生命',
        hunger: '饥饿',
        shells: '贝壳',
        herbs: '草药',
        crystals: '水晶',
        hygiene: '清洁度',
        crafting: '制作经验',
        organization: '整理度',
        vines: '藤蔓',
        metal: '金属',
        mud: '泥土',
        mushrooms: '蘑菇',
        sand: '沙子',
        cactus: '仙人掌',
        reeds: '芦苇',
        scouting: '侦察经验'
      }
      return map[k] || k
    },
    formatReq(req) {
      if (!req) return '无'
      return Object.keys(req).map(k => `${this.translate(k)}×${req[k]}`).join('、')
    }
  }
}
</script>

<style scoped>
.overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.6); 
  display: flex; 
  align-items: flex-end; 
  z-index: 2000; 
  animation: fadeIn 0.3s ease;
}

.sheet { 
  width: 100%; 
  max-height: 80vh; 
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); 
  border-top-left-radius: 20rpx; 
  border-top-right-radius: 20rpx; 
  color: #e2e8f0; 
  overflow: hidden;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.3);
  animation: slideUp 0.3s ease;
}

.header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 20rpx 24rpx; 
  border-bottom: 1rpx solid #334155; 
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.title { 
  font-size: 32rpx; 
  font-weight: bold; 
  color: #f8fafc; 
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.close { 
  background: #ef4444; 
  color: #fff; 
  border: none; 
  border-radius: 10rpx; 
  padding: 8rpx 16rpx; 
  font-size: 24rpx; 
  transition: all 0.3s ease;
}

.close:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.content { 
  padding: 20rpx; 
  display: grid; 
  gap: 20rpx; 
  max-height: calc(80vh - 80rpx);
  overflow-y: auto;
}

.section-title { 
  display: block; 
  color: #cbd5e1; 
  font-size: 26rpx; 
  font-weight: bold;
  margin-bottom: 12rpx;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.3);
}

.res-list { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12rpx; 
}

.res-item { 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%); 
  padding: 14rpx 16rpx; 
  border-radius: 12rpx; 
  border: 1rpx solid #374151;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}

.res-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.3);
  border-color: #4b5563;
}

.res-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #e5e7eb;
}

.res-val {
  font-size: 24rpx;
  font-weight: bold;
  color: #fcd34d;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.3);
}

.recipe-list { 
  display: grid; 
  gap: 12rpx; 
}

.recipe-item { 
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%); 
  border: 1rpx solid #374151; 
  border-radius: 16rpx; 
  text-align: left; 
  color: #e5e7eb; 
  padding: 16rpx; 
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}

.recipe-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.3);
  border-color: #4b5563;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

.recipe-item:active {
  transform: translateY(0);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}

.row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 8rpx; 
}

.row.small { 
  font-size: 22rpx; 
  color: #9ca3af; 
  line-height: 1.4;
}

.recipe-name { 
  font-weight: bold; 
  font-size: 26rpx;
  color: #f8fafc;
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.3);
}

.recipe-type { 
  color: #93c5fd; 
  font-size: 20rpx;
  background: rgba(147, 197, 253, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  border: 1rpx solid rgba(147, 197, 253, 0.3);
}

.req {
  color: #fbbf24;
  font-weight: 500;
}

.eff {
  color: #10b981;
  font-weight: 500;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    transform: translateY(100%); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 6rpx;
}

.content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 3rpx;
}

.content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3rpx;
}

.content::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}
</style> 